<!--
 * @Author: zjf
 * @Date: 2022-09-26 10:12:22
 * @LastEditors: zjf
 * @LastEditTime: 2023-12-07 13:49:23
 * @Description:
-->
<template>
  <l-draw-map v-if="!loading" ref="SetMap" :geoData="geoData" @getDrawData="getDrawData"
    :isReadOnly="!hasEdit"></l-draw-map>
</template>

<script>
export default {
  components: {},
  props: {
    projectId: {//项目id
      type: String,
      default: '',
    },
    hasEdit: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
  },
  data() {
    return {
      loading: true,
      geoData: null,
      geometry: null,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {

      this.loadProjectGeo();
    },

    /** 获取项目空间信息 */
    async loadProjectGeo() {
      const api = window.$crud("project/geography/list");
      const data = await this.$awaitWraper(api.getInfo({ projectId: this.projectId }))
      if (data && data.length) {
        this.projectGeoId = data[0].id
        var wkt = require('wellknown')
        this.geometry = data[0].geometry
        this.geoData = wkt.parse(data[0].geometry)
      }
      this.loading = false
    },

    /** 绘制 获取绘制数据 */
    getDrawData(data) {
      var turf = require('@turf/turf')
      var wkt = require('wellknown')
      if (data.length) {
        var fc = turf.featureCollection(data)
        var combined = turf.combine(fc)
        this.geoData = combined?.features[0].geometry
        this.geometry = this.geoData?.coordinates?.length ? wkt.stringify(this.geoData) : ''
        this.saveDraw({ geometry: this.geometry })
      } else {
        this.geometry = ""
        this.geoData = {}
        this.saveDraw({ geometry: this.geometry })
      }
    },
    /** 绘制保存 */
    async saveDraw({ geometry }) {
      await this.getGeoData() // 获取空间信息
      const postData = {
        projectId: this.projectId,
        geometry: geometry
      }
      var res = null
      if (this.projectGeoId) {
        // 编辑
        const api = window.$crud("project/geography");
        res = await this.$awaitWraper(api.update(this.projectGeoId, postData))
      } else {
        // 新增
        const api = window.$crud("project/geography/info");
        res = await this.$awaitWraper(api.add(postData))
      }
      if (res) {
        this.$message({
          type: 'success',
          message: '提交成功'
        })
        await this.getGeoData() // 获取空间信息

      }
    },
    /** 获取项目空间信息 */
    async getGeoData() {
      if (this.projectId) {
        const api = window.$crud("project/geography/list");
        const data = await this.$awaitWraper(api.getInfo({ projectId: this.projectId }))
        if (data && data.length) {
          this.projectGeoId = data[0].id
          var wkt = require('wellknown')
          this.geometry = data[0].geometry
          this.geoData = wkt.parse(data[0].geometry)
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.map-index {
  width: 100%;
  height: 100%;

  .btn {
    margin-bottom: 15px;
  }

  #cfmap {
    height: 100%;
    width: 100%;
  }
}
</style>
